import deepClone from "@/utils/deepClone"
import {Picker, View} from "@tarojs/components"
import dayjs from "dayjs"
import {CSSProperties, useEffect, useState} from "react"

const dateListEmu = {day: "日", week: "周", month: "月"}

export type DateListEmu = typeof dateListEmu
export type DateListEmuKey = keyof DateListEmu
let format = "YYYY-MM-DD"

/**指定日期范围 */
export const AppointedDate: React.FC<{
	value?: DateListEmuKey
	onChange?: (start: string, end: string) => void
	emuOptions?: {[key in DateListEmuKey]?: string}
	dateOptions?: DateListEmuKey[]
	style?: CSSProperties
}> = ({value, onChange, emuOptions, dateOptions, style}): JSX.Element => {
	const [dateList] = useState(dateOptions || (Object.keys(dateListEmu) as DateListEmuKey[]))

	const [textEmu] = useState(Object.assign(deepClone(dateListEmu) as DateListEmu, emuOptions))

	const [dateTarget, setDateTarget] = useState<DateListEmuKey>(value || "day")

	const getDateByTarget = (target: DateListEmuKey) => {
		let startDate = dayjs().format(format)
		let endDate = dayjs().format(format)
		if (target === "week") {
			startDate = dayjs().subtract(1, "week").format(format)
		} else if (target === "month") {
			startDate = dayjs().subtract(1, "month").format(format)
		}
		console.log(
			"AppointedDate getDateByTarget 指定日期范围 被选择 向父组件发数据",
			startDate,
			endDate
		)
		onChange && onChange(startDate, endDate)
	}

	useEffect(() => {
		if (value) {
			getDateByTarget(value)
		}
		return () => {}
	}, [])

	return (
		<View
			className="h-32 p-6 rounded-4 bg-xxx_bg flex justify-around items-center"
			style={Object.assign({}, style)}
		>
			{dateList.map(item => (
				<View
					className={`w-33 h-20 rounded-2 text-12 font-bold flex justify-center items-center
            ${dateTarget === item ? "bg-primary text-white" : ""}`}
					onClick={() => {
						setDateTarget(item)
						getDateByTarget(item || "day")
					}}
				>
					{textEmu[item]}
				</View>
			))}
		</View>
	)
}

/**日期范围选择器 */
export const PickerDateRange: React.FC<{
	lazy?: boolean
	startTime?: string
	endTime?: string
	onChange?: (start: string, end: string) => void
	style?: CSSProperties
	autoDefault?: boolean
}> = ({startTime, endTime, onChange, style, autoDefault = true}): JSX.Element => {
	const [startDateTime, setStartDateTime] = useState(autoDefault ? dayjs().format(format) : "")
	const [endDateTime, setEndDateTime] = useState(autoDefault ? dayjs().format(format) : "")

	useEffect(() => {
		console.log(
			"PickerDateRange useEffect 时间选择器 传入的值发生变化",
			startTime || "空",
			endTime || "空"
		)
		startTime && startTime !== startDateTime && setStartDateTime(startTime)
		endTime && endTime !== endDateTime && setEndDateTime(endTime)
	}, [startTime, endTime])

	useEffect(() => {
		console.log(
			"PickerDateRange useEffect 时间选择器 开始时间和结束时间变化",
			startDateTime || "空",
			endDateTime || "空"
		)
		startDateTime && endDateTime && onChange && onChange(startDateTime, endDateTime)
	}, [startDateTime, endDateTime])

	return (
		<View
			className="h-32 flex justify-center items-center pl-6 border-1 border-x_line border-solid rounded-4"
			style={Object.assign({}, style)}
		>
			{/* 开始日期 */}
			<Picker
				className="flex-1 truncate"
				header-text="开始时间"
				mode="date"
				value={startDateTime}
				end={dayjs().format(format)}
				onChange={e => {
					let {value} = e.detail
					setStartDateTime(value)
				}}
			>
				<View className="notHanzi text-11 text-center text-info_text mr-6">
					{startDateTime}
				</View>
			</Picker>
			<View className="notHanzi w-16 h-16 text-11 text-info_text mr-6 flex justify-center items-center">
				<View className="w-6 h-6 border-t-0 border-l-0 border-r border-b border-black border-solid transform rotate-45"></View>
			</View>
			<View className="notHanzi text-11 text-info_text mr-6">-</View>
			<Picker
				className="flex-1 truncate"
				header-text="结束时间"
				mode="date"
				value={endDateTime}
				start={dayjs(startDateTime).subtract(1, "day").format(format)}
				end={dayjs().format(format)}
				onChange={e => {
					let {value} = e.detail
					setEndDateTime(value)
				}}
			>
				<View className="notHanzi text-11 text-center text-info_text mr-6">
					{endDateTime}
				</View>
			</Picker>
			<View className="notHanzi w-16 h-16 text-11 text-info_text mr-6 flex justify-center items-center">
				<View className="w-6 h-6 border-t-0 border-l-0 border-r border-b border-black border-solid transform rotate-45"></View>
			</View>
		</View>
	)
}

/**
 * 日期范围选择器和指定日期范围选择联动
 * @param
 * @returns
 */
export const DatePickerRow: React.FC<{
	lazy?: boolean
	pickerDateAutoDefault?: boolean
	defaultAppointedDate?: DateListEmuKey
	changeDateRange?: (s: string, e: string) => void
	style?: CSSProperties
}> = ({
	changeDateRange,
	style,
	defaultAppointedDate,
	pickerDateAutoDefault = true,
	lazy
}): JSX.Element => {
	const [apDateRange, setApDateRange] = useState(["", ""]) //用于接收日周月选择器返回的开始日期
	return (
		<View
			className="w-full flex justify-between items-center"
			style={Object.assign(
				{
					marginBottom: "48rpx",
					padding: "0 32rpx"
				},
				style
			)}
		>
			<PickerDateRange
				lazy={lazy}
				autoDefault={pickerDateAutoDefault}
				startTime={apDateRange[0]}
				endTime={apDateRange[1]}
				style={{
					flex: 1,
					backgroundColor: "#fff",
					marginRight: "30rpx"
				}}
				onChange={(s, e) => {
					changeDateRange && changeDateRange(s, e)
				}}
			></PickerDateRange>
			<AppointedDate
				style={{
					flex: 1,
					backgroundColor: "#fff !important"
				}}
				value={defaultAppointedDate}
				onChange={(s, e) => {
					setApDateRange([s, e])
				}}
			></AppointedDate>
		</View>
	)
}
